<template>
  <div style="width: 100%;">
    <div class="header">
      <i class="el-icon-s-marketing"></i> zspt 单相电表概况
    </div>
    <el-table ref="table" :data="spemData" stripe style="width: 100%;" height="390" id="scoll">
      <el-table-column type="index" width="60" align="center"></el-table-column>
      <el-table-column prop="name" label="电表名称" sortable align="center"></el-table-column>
      <el-table-column prop="rmsCurrent" label="电流 / mA" align="center" width="150"></el-table-column>
      <el-table-column prop="rmsVoltage" label="电压 / V" align="center" width="150"></el-table-column>
      <el-table-column prop="time" label="采集时间" sortable align="center"></el-table-column>
      <el-table-column prop="loopCounter" label="采集频率" align="center"></el-table-column>
      <el-table-column prop="uuid" label="uuid" align="center"></el-table-column>
    </el-table>
    <div id="line" style="width: 1300px;height: 350px;margin-top: 20px;"></div>
  </div>
</template>

<script>
  export default {
    name: 'spem',
    data() {
      return {
        spemData: require('../../../assets/json/spem.json'),
        currentData: [],
        voltageData: [],
        time: []
      }
    },
    mounted() {
      this.numberStatistics();
      this.drawLine();
      this.tableScroll();
    },
    methods: {
      tableScroll() {
        // 拿到表格挂载后的真实DOM
        const table = this.$refs.table;
        // 拿到表格中承载数据的div元素
        const divData = table.bodyWrapper;
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
        setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }, 100);
        window.onresize = () => {
          return (() => {
            window.screenHeight = document.body.clientHeight;
            this.clientHeight = window.screenHeight;
          })()
        }
      },
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('line'));
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'axis'
          },
          legend: {},
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {
                readOnly: false
              },
              magicType: {
                type: ['line', 'bar']
              },
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.time
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            }
          },
          series: [{
              name: '电压',
              type: 'line',
              data: this.voltageData,
              markPoint: {
                data: [{
                    type: 'max',
                    name: 'Max'
                  },
                  {
                    type: 'min',
                    name: 'Min'
                  }
                ]
              },
              markLine: {
                data: [{
                  type: 'average',
                  name: 'Avg'
                }]
              },
              smooth: true
            },
            {
              name: '电流',
              type: 'line',
              data: this.currentData,
              markPoint: {
                data: [{
                  name: '周最低',
                  value: -2,
                  xAxis: 1,
                  yAxis: -1.5
                }]
              },
              markLine: {
                data: [{
                    type: 'average',
                    name: 'Avg'
                  },
                  [{
                      symbol: 'none',
                      x: '90%',
                      yAxis: 'max'
                    },
                    {
                      symbol: 'circle',
                      label: {
                        position: 'start',
                        formatter: 'Max'
                      },
                      type: 'max',
                      name: '最高点'
                    }
                  ]
                ]
              },
              smooth: true
            }
          ]
        })
        window.addEventListener("resize", function() { //自动适应大小
          myChart.resize();
        });
      },
      numberStatistics() {
        this.currentData = [];
        this.voltageData = [];
        this.time = [];
        this.spemData.forEach(item => {
          this.currentData.push(item.rmsCurrent);
          this.voltageData.push(item.rmsVoltage);
          this.time.push(item.time);
        })
      }
    }
  }
</script>

<style>
  @import url("../../../assets/css/roadLight.css");
</style>
